<template>
  <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 m-crm-sms-form" >
    <div class="widget am-cf">
      <div class="widget-head am-cf">
        <div class="widget-title am-fl">短信设置</div>
        <div class="widget-function am-fr">
          <button type="button" class="am-btn am-btn-default" @click="$router.go(-1)">返回</button>
        </div>
      </div>
      <div class="widget-body am-fr">
        <el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group" :disabled="!!workSetupOfCampusId"
                   v-model="areaTeamId" placeholder="请选择区域">
          <el-option
            v-for="item in areaTeams"
            :key="item.areaTeamId"
            :label="item.name"
            :value="item.areaTeamId">
          </el-option>
        </el-select>
        <el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group" :disabled="!!workSetupOfCampusId"
                   v-model="busTeamId" no-data-text="无数据，请切换区域" placeholder="请选择校区">
          <el-option
            v-for="item in busTeams"
            :key="item.campusId"
            :label="item.campusName"
            :value="item.campusId">
          </el-option>
        </el-select>
        <div class="form am-form-group">
          <p class="theme">提醒设置</p>
          <div v-if="!empty" class="wrapper am-form-group">
            <div class="title">资源优先级：高</div>
            <div class="content" v-for="(item, index) in remindConfig.high">
              <span>
                提醒顺序{{index + 1}}：
              </span>
              <span class="job-name">
                岗位名称: {{item.jobName}}
              </span>
              <el-input placeholder="接收人姓名" class="item-input" v-model="item.name"></el-input>
              <el-input placeholder="接收人电话" class="item-input" v-model="item.phone"></el-input>
            </div>
            <div class="title">资源优先级：中</div>
            <div class="content" v-for="(item, index) in remindConfig.mid">
              <span>
                提醒顺序{{index + 1}}：
              </span>
              <span class="job-name">
                岗位名称: {{item.jobName}}
              </span>
              <el-input placeholder="接收人姓名" class="item-input" v-model="item.name"></el-input>
              <el-input placeholder="接收人电话" class="item-input" v-model="item.phone"></el-input>
            </div>
            <div class="title">资源优先级：低</div>
            <div class="content" v-for="(item, index) in remindConfig.low">
              <span>
                  提醒顺序{{index + 1}}：
                </span>
              <span class="job-name">
                岗位名称: {{item.jobName}}
              </span>
              <el-input placeholder="接收人姓名" class="item-input" v-model="item.name"></el-input>
              <el-input placeholder="接收人电话" class="item-input" v-model="item.phone"></el-input>
            </div>
          </div>
          <div v-else>
            当前区域还没设置流程，
            <router-link to="/main/crm/configSet" target="a">前往</router-link>
          </div>
        </div>
        <div class="am-form-group" style="text-align: center">
          <button type="button" size="big" class="am-btn am-btn-primary" @click="handleSave">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import io from '../../lib/io'
  import moment from 'moment'

  export default{
    data(){
      return{
        areaTeamId: '',
        busTeamId: '',
        status: 1,
        workSetupOfCampusId: '',
        empty: true,
        remindConfig: {
          low: [{jobName: '', phone: '', name: ''}],
          mid: [{jobName: '', phone: '', name: ''}],
          high: [{jobName: '', phone: '', name: ''}],
        }
      }
    },
    created:function(){
      if (this.$route.query.areaTeamId) {
        this.areaTeamId = this.$route.query.areaTeamId
      }
      let info = this.$route.query.info
      if (info) {
        this.empty = false
        this.edit = true
        info = JSON.parse(info)
        this.status = info.status
        this.areaTeamId = info.areaTeamId
        this.busTeamId = info.campusId
        this.workSetupTemplateId = info.workSetupTemplateId
        this.workSetupOfCampusId = info.workSetupOfCampusId
        this.remindConfig = JSON.parse(info.remindConfig)
      } else {
        this.loadTableData()
      }
    },
    watch: {
      areaTeamId () {
        if (!this.$route.query.info) {
          this.busTeamId = ''
        }
        this.loadTableData()
      }
    },
    computed: {
      areaTeams: function () {
        return this.$root.config.areaTeams || []
      },
      busTeams: function () {
        return ( ( this.areaTeamId  ) ? ( this.$root.config.campusList.filter((val) => val.areaTeamId === this.areaTeamId) || [] ) : [] )
      },
    },
    methods:{
      loadTableData: function () {
        io.post(io.workSetupTemplate, {
          areaTeamId: this.areaTeamId
        }, (ret) => {
          if (ret.success) {
            if (ret.data[0] && ret.data[0].remindConfig) {
              this.empty = false
              if (this.edit) {
                this.mergeData(JSON.parse(ret.data[0].remindConfig))
              } else {
                Object.assign(this.remindConfig, JSON.parse(ret.data[0].remindConfig))
              }
              this.workSetupTemplateId = ret.data[0].workSetupTemplateId
            }
          } else {
            this.$alert(ret.desc)
          }
        })
      },
      mergeData (data) {
        for(let i = 0, len = Math.max(data.low.length, this.remindConfig.low.length); i < len; i++) {
          if (data.low.length > this.remindConfig.low.length) {
            if (this.remindConfig.low[i]) {
              if (data.low[i].jobName !== this.remindConfig.low[i].jobName) {
                this.remindConfig.low[i].jobName = data.low[i].jobName
                this.remindConfig.low[i].phone = data.low[i].phone
                this.remindConfig.low[i].name = data.low[i].name
              }
            } else {
              this.remindConfig.low.push({jobName: data.low[i].jobName, phone: '', name: ''})
            }
          } else {
            if (data.low[i]) {
              if (data.low[i].jobName !== this.remindConfig.low[i].jobName) {
                this.remindConfig.low[i].jobName = data.low[i].jobName
                this.remindConfig.low[i].phone = data.low[i].phone
                this.remindConfig.low[i].name = data.low[i].name
              }
            } else {
              this.remindConfig.low.splice(i, this.remindConfig.low.length)
              break
            }
          }
        }
        for(let i = 0, len = Math.max(data.mid.length, this.remindConfig.mid.length); i < len; i++) {
          if (data.mid.length > this.remindConfig.mid.length) {
            if (this.remindConfig.mid[i]) {
              if (data.mid[i].jobName !== this.remindConfig.mid[i].jobName) {
                this.remindConfig.mid[i].jobName = data.mid[i].jobName
                this.remindConfig.mid[i].phone = data.mid[i].phone
                this.remindConfig.mid[i].name = data.mid[i].name
              }
            } else {
              this.remindConfig.mid.push({jobName: data.mid[i].jobName, phone: '', name: ''})
            }
          } else {
            if (data.mid[i]) {
              if (data.mid[i].jobName !== this.remindConfig.mid[i].jobName) {
                this.remindConfig.mid[i].jobName = data.mid[i].jobName
                this.remindConfig.mid[i].phone = data.mid[i].phone
                this.remindConfig.mid[i].name = data.mid[i].name
              }
            } else {
              this.remindConfig.mid.splice(i, this.remindConfig.mid.length)
              break
            }
          }
        }
        for(let i = 0, len = Math.max(data.high.length, this.remindConfig.high.length); i < len; i++) {
          if (data.high.length > this.remindConfig.high.length) {
            if (this.remindConfig.high[i]) {
              if (data.high[i].jobName !== this.remindConfig.high[i].jobName) {
                this.remindConfig.high[i].jobName = data.high[i].jobName
                this.remindConfig.high[i].phone = data.high[i].phone
                this.remindConfig.high[i].name = data.high[i].name
              }
            } else {
              this.remindConfig.high.push({jobName: data.high[i].jobName, phone: '', name: ''})
            }
          } else {
            if (data.high[i]) {
              if (data.high[i].jobName !== this.remindConfig.high[i].jobName) {
                this.remindConfig.high[i].jobName = data.high[i].jobName
                this.remindConfig.high[i].phone = data.high[i].phone
                this.remindConfig.high[i].name = data.high[i].name
              }
            } else {
              this.remindConfig.high.splice(i, this.remindConfig.high.length)
              break
            }
          }
        }
        console.log(this.remindConfig)
      },
      validate (val) {
        let result = true
        for (let i = 0, len = val.length; i< len; i++) {
          console.log(val[i].phone)
          if (val[i].phone && !(/^1((3|4|5|7|8|9){1}\d{1}|70)\d{8}$/).test(val[i].phone)) {
            this.$alert('请输入正确的电话号码！')
            result = false
            break
          }
        }
        return result
      },
      handleSave () {
        if (!this.busTeamId) {
          this.$alert('请选择校区！')
          return
        }
        if (this.validate(this.remindConfig.low) && this.validate(this.remindConfig.mid) && this.validate(this.remindConfig.high)) {
          io.post(io.saveOrUpdateWorkSetupOfCampus, {
            workSetupTemplateId: this.workSetupTemplateId,
            workSetupOfCampusId: this.workSetupOfCampusId,
            areaTeamId: this.areaTeamId,
            remindConfig: JSON.stringify(this.remindConfig),
            campusId: this.busTeamId,
            status: this.status,
          }, (ret) => {
            if (ret.success) {
              this.$toast('保存成功！')
              this.$router.go(-1)
            } else {
              this.$alert(ret.desc)
            }
          })
        }
      },
    }
  }
</script>

<style lang="less" scoped>
  .m-crm-sms-form {
    .widget-body {
      width: 950px;
      float: none;
      margin: 0 auto;
    }
    .form {
      clear: both;
      padding: 0 10px;
    }
    .theme {
      color: #333;
    }
    .wrapper {
      padding: 0 10px;
      min-width: 800px;
      margin: 0 auto;
      .item-input {
        width: 150px;
        margin: 0 5px;
      }
      .job-name {
        width: 270px;
        display: inline-block;
      }
      .title {
        color: #666;
      }
      .content {
        padding: 0px 10px;
        height: 50px;
        line-height: 50px;
        vertical-align: middle;
      }
    }
  }
</style>
